﻿<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/html/js/jquery-1.4.2.js"></script>
<title>藏边旅行网_CSS伪类研究</title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	body{
		font-family:"Verdana","宋体";
		font-size:14px;	
	}
	.wrap{
		width:760px;
		margin:0 auto;
		margin-top:20px;
	}
	
	.link{
		color:#999;
		text-decoration: none;
	}
	.visited{
		color:red;
		text-decoration: none;
	}
	.focus{
		color:blue;
		font-size:20px;
	}
	.hover{
		color:blue;
	}
	.active{
		font-style: italic;
		font-size:34px;
	}
	
	/*链接伪类*/
	#pseudo a{
		color:gray;
	}
	#pseudo a:link{
		color:blue;
	}
	#pseudo a:visited {
		color:red;
		text-decoration: none;
	}
	
	/*动态伪类*/
	#dynamic a{
		color:gray;
		margin:0 2px;
	}
	#dynamic a:link{
		color:#999;
		text-decoration: none;
	}
	#dynamic a:visited {
		color:red;
		text-decoration: none;
	}
	
	#dynamic a:focus{
		color:blue;
		font-size:20px;
	}
	
	#dynamic a:hover{
		color:blue;
	}
	
	#dynamic a:active{
		font-style: italic;
		font-size:34px;
	}
	
	#dynamic input:focus{
		color:blue;
		font-size:20px;
	}
	
	#dynamic input:hover{
		color:blue;
	}
	
	#dynamic input:active{
		font-style: italic;
		font-size:34px;
	}
	
		#dynamic button:focus{
		color:blue;
		font-size:20px;
	}
	
	#dynamic button:hover{
		color:blue;
	}
	
	#dynamic button:active{
		font-style: italic;
		font-size:34px;
		outline:none;
	}
	
	
	#dynamic div:focus{
		color:blue;
		font-size:20px;
		border:1px red solid;
	}
	
	#dynamic div:hover{
		color:blue;
	}
	
	#dynamic div:active{
		font-style: italic;
		font-size:34px;
	}

	/**/

	#dynamic input[type=text]:focus{
   		border: 1px solid #F8A746 !important;
    		outline: 1px solid #F6E0C5 !important;
	}
	
	#dynamic input[type=text]:hover{
		color:blue;
	}
	
	#dynamic input[type=text]:active{
		font-style: italic;
		font-size:34px;
	}


	
	
</style>
</head>
<body>
	<div class="wrap">
	
		<div>
			<label>各种伪类样式</label>
			<p>
				link:<a class="link" href="javascript:void(0)">新浪微博</a>
				visited:<a class="visited" href="javascript:void(0)">新浪微博</a>
				focus:<a class="focus" href="javascript:void(0)">新浪微博</a>
				hover:<a class="hover" href="javascript:void(0)">新浪微博</a>
				active:<a class="active" href="javascript:void(0)">新浪微博</a>
			</p>
		</div>
		
		<div>
			<label>链接伪类</label>
			<input type="button" value="增加一个空链接" onclick="addBlankLink('0')"/>
			<div id="pseudo">
				<a class="link_pseudo" href="#">新浪微博</a>
				<a class="link_pseudo" href="/c">新浪微博</a>
			</div>
		</div>
		
		<div>
			<label>动态伪类</label>
			<input type="button" value="增加一个空链接" onclick="addBlankLink('1')"/>
			<input type="button" value="增加一个输入框" onclick="addBlankLink('2')"/>
			<input type="button" value="增加一个按钮" onclick="addBlankLink('3')"/>
			<input type="button" value="增加一个DIV" onclick="addBlankLink('4')"/>
			<div id="dynamic">
				<a class="link_pseudo" href="#">动态伪类</a>
				<a class="link_pseudo" href="/c">动态伪类</a>
			</div>
		</div>
	</div>

<script type="text/javascript">
	function addBlankLink(type){
		if(type==="0"){
			var time = new Date().getTime();
			var url = "http://www.baidu.com/?" + time; 
			var newA = "<a class='link_pseudo' href='"+url+"' target='_blank' >新浪微博 "+time+"</a>";
			$("#pseudo").append(newA);
		}else if(type==="1"){
			var time = new Date().getTime();
			var url = "http://www.baidu.com/?" + time; 
			var newA = "<a class='link_pseudo' href='javascript:void(0)' target='_blank' >动态伪类  "+time+"</a>";
			$("#dynamic").append(newA);
		}else if(type==="2"){
			var time = new Date().getTime();
			var url = "http://www.baidu.com/?" + time; 
			var newA = "<a class='link_pseudo' href='javascript:void(0)' target='_blank' >动态伪类  "+time+"</a>";
			var input = "<input type='text'>";
			$("#dynamic").append(input);
		}else if(type==="3"){
			var time = new Date().getTime();
			var url = "http://www.baidu.com/?" + time; 
			var newA = "<a class='link_pseudo' href='javascript:void(0)' target='_blank' >动态伪类  "+time+"</a>";
			var input = "<input type='button' value='click me'>";
			var btn = "<button value='click button'>click button</button>";
			$("#dynamic").append(btn);
		}
		else if(type==="4"){
			var time = new Date().getTime();
			var url = "http://www.baidu.com/?" + time; 
			var newA = "<a class='link_pseudo' href='javascript:void(0)' target='_blank' >动态伪类  "+time+"</a>";
			var input = "<input type='button' value='click me'>";
			var div = "<div style='width:100px;height:100px'>click button</div>";
			$("#dynamic").append(div);
		}
	}
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F981a4babede43d4b65dfce905038f9b5' type='text/javascript'%3E%3C/script%3E"));

</script>
<script>
	$(function(){
		$("a[href*=tongji]").hide();
	});
</script>
</body>
</html>